<template>
  <div class="approve-form">
    <p class="approve-form-title">审批记录</p>
    <div class="block">
      <el-timeline>
        <el-timeline-item placement="top">
          <el-card>
            <el-col class="avatar-approve" :span="3">
              <el-avatar>张三</el-avatar>
            </el-col>
            <el-col :span="16">
              <span>审批人:欧阳娜娜</span>
              <span>欧阳娜娜</span>
              <span>欧阳娜娜</span>
              <span>欧阳娜娜</span>
              <p>职位：部门主管</p>
              <p>审批时间：2019-12-20 14:15:20</p>
              <p>
                拒绝原因：Lorem ipsum dolor sit amet, consectetur adipiscing
                elit. Aenean euismod bibendum laoreet
              </p>
            </el-col>
            <el-col :span="5"><el-avatar>456</el-avatar></el-col>
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top">
          <el-card>
            <h4>更新 Github 模板</h4>
            <p>王小虎 提交于 2018/4/3 20:46</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top">
          <el-card>
            <h4>更新 Github 模板</h4>
            <p>王小虎 提交于 2018/4/2 20:46</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: ""
    };
  }
};
</script>
<style lang="scss">
.approve-form {
  background: #fff;
  .approve-form-title {
    padding: 20px;
  }
  .avatar-approve {
    padding-left: 0px !important;
  }
  p {
    border-bottom: 0px;
  }
  .el-timeline {
    margin: 10px 0;
  }
  .el-timeline-item__wrapper {
    top: -30px;
    padding: 10px 20px;
  }
  .el-step.is-vertical .el-step__line {
    top: 5px;
  }
  ul {
    padding-inline-start: 10px;
  }
}
</style>
